<template>
  <b-container>
    
    <b-breadcrumb :items="items" class="bg-transparent"></b-breadcrumb>
    <TypeNav></TypeNav>

    <b-row class="mb-5" v-for="(item, index) in list" :key="index">
      <b-col cols="3">
        <router-link :to="{name:'coursedetail',query:{cid:item.cid}}">
          <img :src="require(`../assets/images/${item.pic}`)" alt />
        </router-link>
      </b-col>
      <b-col cols="5" class="course-desc">
        <h2>{{item.title}}</h2>
        <p>讲师：{{item.tname}}</p>
        <p>课时：{{item.cLength}}</p>
        <p>开课时间：{{item.startTime}}</p>
        <p>
          上课地点：{{item.address}}
          <a href>查看各校区地址</a>
        </p>
      </b-col>
      <b-col cols="2">
        <h2 class="text-danger my-5">¥ {{item.price}}</h2>
      </b-col>
      <b-col cols="2">
        <router-link :to="{name:'coursedetail',query:{cid:item.cid}}" class="btn btn-success my-5">查看详情</router-link>
      </b-col>
    </b-row>
    <!-- 分页导航 -->
    <b-pagination-nav :link-gen="linkGen" :number-of-pages="pageTotal" use-router></b-pagination-nav>
  </b-container>
</template>

<script>
import TypeNav from "../components/TypeNav"
export default {
  name: "Course",
  data() {
    return {
      list: [],
      curPage: 1, //当前页码
      pageSize: 3, //单页记录数
      total: 0, //总课程数
      pageTotal: 1, //总页数
      typeId:"",
      courseType:["全部课程","基础课程","核心课程","进阶课程"]
      ,
      items: [
        {
          text: "首页",
          to: { name: "home" }
        },
        {
          text: "全部课程",
          active: true
        }
      ]
    };
  },
  methods: {
    // 获取课程列表
    getCourses() {
      this.axios
        .get("/course/list", {
          params: {
            // pageNum:this.$route.query.curPage
            curPage: this.curPage,
            typeId:this.typeId
          }
        })
        .then(res => {
   
          if (res.data.code == 200) {
            this.list = res.data.data.list;
            // this.pageSize = res.data.data.pageSize;
            this.total = res.data.data.total;
            this.pageTotal = res.data.data.pageTotal;
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    // pageNum是当前页码
    linkGen(pageNum) {
      // return pageNum === 1 ? '?' : `?page=${pageNum}`
      return { path: `/course?curPage=${pageNum}&typeId=${this.typeId}` };
    }
  },
  mounted() {
    // 组件挂载完成后,给参数赋值
    this.curPage = this.$route.query.curPage;
    this.typeId=this.$route.query.typeId
    let myid= this.typeId
    this.getCourses();
    this.items[1].text=this.courseType[myid];
  },
  components:{
  "TypeNav":TypeNav
  }
};
</script>

<style>
.course-desc > p {
  margin: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: ">" !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #28a745 !important
    ;
}
</style>